<div class="card border-info m-3">
    <div id="mask1" class="mask"></div>
    <h5 class="card-header bg-info text-white">新增</h5>
    <div class="card-body">
        <h5 class="card-title">基础信息</h5>
        <p class="card-text">请按内容提示，录入相关信息。</p>
        <div class="row mb-3">
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">编号</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serNum">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serNum'] !== null">{{errRes.error?.detail['MesCreate.serNum']}}</span>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">标题</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.serTitle">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serTitle'] !== null">{{errRes.error?.detail['MesCreate.serTitle']}}</span>
            </div>

        </div>
        <div class="row mb-3">

            <div class="col-6">
                <ng-select
                        [items]="extend.domain.mesType.items"
                        [multiple]="false"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindLabel="name" bindValue="id"
                        placeholder="{{extend.domain.mesType.nickname}}" tooltip="{{extend.domain.mesType.nickname}}"
                        [(ngModel)]="domain.serActivityType"
                        (change)="extend.domain.mesType.change($event)">
                </ng-select>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serActivityType'] !== null">{{errRes.error?.detail['MesCreate.serActivityType']}}</span>
            </div>
            <div class="col-6">
                <ng-select
                        [items]="extend.domain.mesTemplate.items"
                        [multiple]="false"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindLabel="name" bindValue="id"
                        placeholder="{{extend.domain.mesTemplate.nickname}}" tooltip="{{extend.domain.mesTemplate.nickname}}"
                        [(ngModel)]="domain.sendTo">
                </ng-select>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.sendTo'] !== null">{{errRes.error?.detail['MesCreate.sendTo']}}</span>
            </div>
            <!--<div class="col-5">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">发送给：</button>
                    </div>
                    <input type="text" class="form-control border-info" [(ngModel)]="domain.sendTo">
                </div>
            </div>
            <div class="col-1">
                <div class="input-group-prepend">
                    <button class="btn btn-info border-info w-100" type="button" (click)="func.choose.chooseUser(editModal)">选择</button>
                </div>
            </div>-->
        </div>
        <!--<div class="row mb-3">
            <div class="col-6">
                <input type="hidden" class="form-control border-info" [readonly]="true"
                       [(ngModel)]="domain.serAudit">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">审核状态</button>
                    </div>
                    <input type="text" class="form-control border-info" [readonly]="true"
                           [value]="extend.domain.serAudit.nickname">
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serAudit'] !== null">{{errRes.error?.detail['MesCreate.serAudit']}}</span>
            </div>
            <div class="col-6">
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">启用状态</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button btnCheckbox btnCheckboxTrue="ENABLE" btnCheckboxFalse="DISABLE"
                                (click)="domain.serUsing = domain.serUsing === 'DISABLE' ? 'ENABLE' : 'DISABLE'"
                                class="btn border-info w-100" type="button"
                                [ngClass]="{'btn-primary': domain.serUsing === 'ENABLE', 'disabled btn-secondary': domain.serUsing === 'DISABLE'}">
                            {{domain.serUsing === 'DISABLE' ? '禁用' : '启用'}}
                        </button>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="row mb-3">
            <div class="col-6">
                <ng-select [dropdownPosition]="'top'"
                           [searchable]="true" bindLabel="name" bindValue="id"
                           placeholder="定时类型" tooltip="定时类型"
                           [items]="[{id:'DAY',name:'每天'},{id:'WEEK',name:'每周'},{id:'MONTH',name:'每月'}]"
                           [(ngModel)]="domain.serTimeType">
                </ng-select>
                <span class="badge badge-danger"
                      *ngIf="errRes.error?.detail['MesCreate.serTimeType'] !== null">{{errRes.error?.detail['MesCreate.serTimeType']}}</span>
            </div>
            <div class="col-6">
                <ng-select
                        [items]="extend.domain.weekType.items"
                        [multiple]="false"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindLabel="name" bindValue="id"
                        placeholder="{{extend.domain.weekType.nickname}}" tooltip="{{extend.domain.weekType.nickname}}"
                        [(ngModel)]="domain.serTimeDetail" *ngIf="domain.serTimeType==='WEEK'">
                </ng-select>
                <ng-select
                        [items]="extend.domain.monthType.items"
                        [multiple]="false"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindLabel="name" bindValue="id"
                        placeholder="{{extend.domain.monthType.nickname}}" tooltip="{{extend.domain.monthType.nickname}}"
                        [(ngModel)]="domain.serTimeDetail" *ngIf="domain.serTimeType==='MONTH'">
                </ng-select>
                <div>
                    <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serTimeDetail'] !== null">{{errRes.error?.detail['MesCreate.serTimeDetail']}}</span>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <app-input-data-time [field]="extend.domain.serEffectiveTime"></app-input-data-time>
            </div>
            <div class="col-6">
                <app-input-data-time [field]="extend.domain.serTimePoint"></app-input-data-time>
            </div>
        </div>
            <!--<div class="row mb-3">
            <div class="col-6">
                <ng-container aria-label="ossUpload">
                    <div class="text-center mb-2"
                         *ngIf="domain.serFileUrl !== null && domain.serFileUrl !== undefined && domain.serFileUrl.length > 0">
                        <img [src]="domain.serFileUrl" style="height: 15rem;">
                        <p><span class="badge badge-success">{{domain.serFileUrl}}</span></p>
                    </div>
                    <input #file class="displayNone" type="file" ng2FileSelect
                           [uploader]="extend.domain.file.oss.uploader"
                           (change)="extend.domain.file.change($event)"/>
                </ng-container>
                <div class="input-group">
                    <div class="input-group-prepend w-25">
                        <button class="btn btn-info border-info w-100" type="button">图片上传</button>
                    </div>
                    <div class="input-group-append w-75">
                        <button class="btn btn-default border-info w-100" type="button" (click)="file.click()">选择</button>
                    </div>
                </div>
                <span class="badge badge-danger" *ngIf="errRes.error?.detail['MesCreate.serFileUrl'] !== null">{{errRes.error?.detail['MesCreate.serFileUrl']}}</span>
            </div>
            <div class="col-6">
                <app-input-group-data [field]="extend.domain.serInputGroupData"></app-input-group-data>
            </div>
        </div>-->
        <div class="row mb-3">
            <div class="col-12">
                <div [froalaEditor]='froalaEditorOptions' [(froalaModel)]="domain.serEditorContent">Hello, Froala!</div>
            </div>
        </div>

        <div class="text-center mt-5">
            <button type="button" class="btn btn-outline-primary" (click)="func.save.req($event)">Save</button>
        </div>
    </div>
    <!--编辑的模态框begin-->
    <div #editModal class="modal-dialog"  draggable="true" style="z-index:100000000000000000;visibility:hidden;position:absolute;left:30%;top:20%;width:100%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    选择用户
                </h4>
                <button type="button" class="close" (click)="func.close.closeEidt(editModal)">X
                </button>
            </div>
            <form role="form" class="form-horizontal" #f="ngForm">
                <div class="modal-body">
                    <div *ngFor="let item of datas">
                        <div class="form-group">
                            <p-checkbox name="allPermission" [value]="item.uuid" [(ngModel)]="selectUserUuid"></p-checkbox> {{item?.serName}}
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="closeBtnId" class="btn btn-default" (click)="func.close.closeEidt(editModal)">关闭</button>
                    <button type="submit" class="btn btn-primary" (click)="func.close.closeEidt(editModal)">确定</button>
                </div>
            </form>
        </div>
    </div>

</div>

<span class="badge badge-info mr-3" *ngIf="errRes?.error?.timestamp !== null">response time: {{errRes?.error?.timestamp}}</span>
<div *ngIf="false">
    <p>{{errRes.error}}</p>
    <p>{{errRes.error?.code}}</p>
    <p>{{errRes.error?.description}}</p>
    <p>{{errRes.error?.theme}}</p>
    <p>{{errRes.error?.timestamp}}</p>
    <p>{{errRes.error?.detail?.RR?.duration}}</p>
    <p>{{errRes.error?.detail['MesCreate.serNum']}}</p>
    <p>{{errRes.error?.detail['MesCreate.serAudit']}}</p>
    <p>{{errRes.error?.detail['MesCreate.serValid']}}</p>
    <p>{{errRes.error?.detail['MesCreate.serValid2']}}</p>
    <p>{{errRes.headers}}</p>
    <p>{{errRes.message}}</p>
    <p>{{errRes.name}}</p>
    <p>{{errRes.ok}}</p>
    <p>{{errRes.status}}</p>
    <p>{{errRes.statusText}}</p>
    <p>{{errRes.url}}</p>
</div>
